<template>
	<view class="">
		<!-- 会员 -->
		<view class="member">
			<view class="member-item">
				<view class="member-img">
					<image src="@/static/images/man.jpg" alt="" style="width: 100%; height: 100%;">
				</view>
				<view class="member-level diamond">钻石会员</view>
				<!-- 会员等级 -->
				<!-- 
					普通会员 normal
					黄金会员 gold
					白金会员 white
					砖石会员 diamond
				 -->
			</view>
			<view class="member-slide">
				<a href="http://www.nnhaoyao.com/user/index">
					<image src="@/static/images/member.png" alt="" style="width: 35px; height: 35px;">
				</a>
				<a @click="Collection">
					<image src="@/static/images/star.png" alt="" style="width: 35px; height: 35px;">
				</a>
			</view>
		</view>

		<!-- 性别 -->
		<view class="sex">
			<!-- 男male 女female -->
			<i class="male"></i>
			<p>性别切换</p>
		</view>

		<!-- 菜单 -->
		<view class="menu">
			<view class="menu-btn">
				<image src="@/static/images/menu.png" alt="" style="width: 20px; height: 20px;">
			</view>
			<view class="menu-slide">
				<a href="javascript:;" class="menu-link" v-for="(item,i) in resData.layerClassAndLayerParamsJSONList" :data-classid="item.id"
				 :data-title="item.classificationName" @click="open_fabric">{{item.classificationName}}</a>
			</view>
		</view>

		<!-- 模特 -->
		<!-- <view class="model">
			<image src="@/static/images/model.png" style="width: 100%; height: 75%;" alt="" />
			<image :src="resData.originalimageUrl" mode="" style="width: 100%; height: 75%;"></image>
		</view> -->
		<view class="model">
			<swiper class="swiper-container model-slide">
				<view class="swiper-wrapper">
					<swiper-item class="swiper-slide" v-for="item in completedme_list">
						<image :src="item.thumb_img" style="width: 100%; height: 1107rpx;" alt=""></image>
					</swiper-item>
				</view>
				<view class="swiper-pagination swiper-pagination-black"></view>
			</swiper>
		</view>


		<!-- 领口 -->
		<view class="ling" @click="introduce">
			<image src="@/static/images/ling.png" class="ling-icon" alt="">
			<p>平驳领</p>
			<image src="@/static/images/dot.png" class="ling-dot" alt="">
		</view>

		<!-- 领口弹窗 -->
		<view class="ling-popp" v-if="is_show_introduce">
			<view class="ling-item">
				<view class="ling-img">
					<image src="@/static/images/man.jpg" alt="" mode="aspectFit">
				</view>
				<view class="ling-info">
					<h3>领型解读</h3>
					<p><b>领型名称：</b>平驳领</p>
					<p><b>领型风格：</b>沉稳、大众、活泼</p>
				</view>
			</view>
			<view class="ling-content">
				<p><b>适用场合：</b>这是一种适合穿着场合比较广的西服领
					子的种类，如果是对西装没什么研究的新人的话，
					那可以大大的放心选择这种西装;商务，婚礼，休闲
					都可以穿，包括在日常生活中使用的场合也很多。</p>
			</view>
			<a class="g-btn" @click="introduce">确认</a>
		</view>


		<!-- 底部3按钮 -->
		<view class="tools ft">
			<a href="javascript:;" class="recom-btn"></a>
			<a href="javascript:;" class="diy-btn"></a>
			<a href="javascript:;" class="share-btn"></a>
		</view>


		<!-- 收藏弹窗 -->
		<view class="recom-popp ft">
			<view class="recom-wrap">
				<a href="javascript:;" class="close"></a>
				<h3>风格</h3>
				<ul>
					<li v-for="(item,i) in resData.styleName" :key="i" :class="{'on': rSelect.indexOf(i)!=-1}" :data-name="item"
					 @click="ggg(i)">
						<p>{{item}}</p>
					</li>
				</ul>
				<a href="javascript:;" class="g-btn" @click="go_btn">收藏</a>
			</view>
		</view>


		<!-- 面料选择 -->
		<view class="cloth-popp ft cloth-choice">
			<a href="javascript:;" class="close"></a>
			<view class="cloth-wrap">
				<view class="cloth-title">
					<b>面料</b>
					<h3>{{layerClassName}}</h3>
				</view>
				<view class="cloth-content">
					<!-- <view class="swiper-container cloth-slide">
						<view class="swiper-wrapper">
							<view class="swiper-slide" v-for="(item,i) in fabrics">
								<view :class="user_choice_id != item.id ? 'cloth-pick' : 'cloth-pick on' " @click="choice" :data-id="item.id" :data-ourid="item.fabric_id?item.fabric_id:''">
									<view class="cloth-item">
										<view class="cloth-img">
											
											<image :src="item.smallUrl" alt="" style="width: 100%; height: 100%;">
										</view>
										<view class="cloth-info">
											<h3>{{item.title}}</h3>
											
											<span class="cloth-link" @click="fabrics_info" :data-id="item.fabric_id">面料详情 ></span>
											
										</view>
									</view>
								</view>
							</view>

						</view>
						<view class="swiper-pagination"></view>
					</view> -->
					<!-- <a href="javascript:;" class="g-btn">加载面料</a> -->
					<view class="cloth-scroll">
						<view class="cloth-scroll-layer" v-for="(item,i) in fabrics" :class="user_choice_id != item.id ? 'cloth-pick' : 'cloth-pick on' "
						 @click="choice" :data-id="item.id" :data-ourid="item.fabric_id?item.fabric_id:''">

							<view class="cloth-item">
								<view class="cloth-img">
									<!-- <image src="@/static/images/cloth_03.jpg" alt="" style="width: 100%; height: 100%;"> -->
									<image :src="item.smallUrl" alt="" style="width: 100%; height: 100%;">
								</view>
								<view class="cloth-info">
									<h3>{{item.title}}</h3>
									<!-- <span>羊毛高档毛料</span> -->
									<span class="cloth-link" @click="fabrics_info" :data-id="item.fabric_id">面料详情 ></span>
									<!-- <a href="javascript:;" class="cloth-link"></a> -->
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 面料详情 -->
		<view class="cloth-popp ft cloth-detail">
			<a href="javascript:;" class="detail-close"></a>
			<view class="cloth-wrap">
				<view class="cloth-title">
					<b>面料详情</b>
					<h3>{{layerClassName}}</h3>
				</view>
				<view class="cloth-content">
					<view class="cloth-detail-item">
						<view class="cloth-detail-img">
							<image :src="fabricsInfo.thumb" alt="" style="width: 100%; height: 100%;">
						</view>
						<view class="cloth-detail-info">
							<view class="cloth-detail-top">
								<h3>{{fabricsInfo.title}}</h3>
								<p>{{fabricsInfo.material}}</p>
							</view>
							<view class="cloth-price">
								<p>￥<em>{{fabricsInfo.price}}</em></p>
							</view>
							<view class="cloth-detail-tips">
								<p>克重：无 编号：{{fabricsInfo.goods_no}}</p>
							</view>
						</view>
					</view>
					<view class="cloth-detail-label">
						<ul>
							<li>
								<p><b>品牌：</b>暂无资料</p>
							</li>
							<li>
								<p><b>适用节气：</b>{{fabricsInfo.season}}</p>
							</li>
							<li>
								<p><b>材质：</b>{{fabricsInfo.material}}</p>
							</li>
							<li>
								<p><b>硬软程度：</b>暂无资料</p>
							</li>
							<li>
								<p><b>花色：</b>{{fabricsInfo.colors}}</p>
							</li>
						</ul>
					</view>
					<view class="cloth-detail-p">
						<p><b>面料描述：</b>{{fabricsInfo.title}}</p>
					</view>
					<a href="javascript:;" class="g-btn">加载面料</a>

				</view>
			</view>
		</view>


		<!-- 面料弹出 -->
		<view class="cloth-left">
			<ul>
				<li class="moveLeft" v-for="item in user_record_tip">
					<p>{{item.name}}</p>
					<view class="cloth-bar">
						<view class="cloth-show">
							<image :src="item.imgurl" alt="">
						</view>
						<a href="javascript:;" class="cloth-show-close" @click="close_show" :data-id="item.id"></a>
					</view>
				</li>
			</ul>
		</view>








	</view>
</template>

<script>
	import {
		flexible
	} from '@/static/js/flexible.js';
	import {
		jquery
	} from '@/static/js/jquery.js';
	import {
		index
	} from '@/static/js/index.js';
	import Swiper from "swiper";
	// import '@/node_modules/swiper/swiper-bundle.css';

	export default {
		data() {
			return {
				resData: [],
				layerClassId: [],
				layerClassName: '',
				fabrics: [],
				fabricsInfo: '',
				rSelect: [],

				user_choice_id: '',
				user_record_history: '', // 用户记录选择历史
				user_record_tip: [] ,//用户记录选择提示
				
				is_show_introduce: false,
				completedme_id: '',
				completedme_list: ''
			}
		},
		mounted() {
			let that = this; //如果下面想要使用变量，请定义
			that.mySwiper = new Swiper(".cloth-slide", {
				// loop: true, // 循环模式选项
				// slidesPerView: 2,
				// slidesPerColumn: 3,
				// pagination: {
				// 	el: '.swiper-pagination',
				// 	type: 'progressbar',
				// },
			});
			
			that.mySwiper = new Swiper ('.model-slide',{
				pagination: {
					el: '.swiper-pagination'
				}
			})
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			text() {
				uni.showLoading({
					title: "加载中"
				})
			},

			UserCore() {
				uni.navigateTo({
					url: ''
				})
			},

			Collection() {
				uni.navigateTo({
					url: '/pages/collection/index'
				})
			},

			get_completed() {
				var post_data = {
					id: this.completedme_id
				}
				this.$http({
					url: 'Customizedapi/Master/completedme_id',
					data: post_data,
					hideLoading: true,
					success: res => {
						this.resData = res.data
						// this.showWachat()
					}
				})
			},

			// 打开面料选项
			open_fabric(e) {
				var layerClassId = e.currentTarget.dataset.classid
				this.layerClassId = layerClassId
				this.layerClassName = e.currentTarget.dataset.title

				// 是否有选择好的面料
				var get_fabrics_id = uni.getStorageSync('layerClassId_' + layerClassId)
				this.user_choice_id = get_fabrics_id ? get_fabrics_id : ''

				this.$http({
					url: 'Customizedapi/Fabric/all_fabrics',
					data: '',
					hideLoading: true,
					success: res => {
						this.fabrics = res.data

						// 打开选项
						$('.cloth-choice').animate({
							'bottom': 0
						}, 300);
					}
				})
			},

			fabrics_info(e) {
				var gid = e.currentTarget.dataset.id
				var post_data = {
					id: gid
				}

				this.$http({
					url: 'Customizedapi/Fabric/fabrics_info',
					data: post_data,
					hideLoading: true,
					success: res => {
						this.fabricsInfo = res.data
						$('.cloth-detail').animate({
							'bottom': 0
						}, 300);
					}
				})
			},

			// 选择使用的面料
			choice(e) {
				var fabricsId = e.currentTarget.dataset.id // 面料ID
				var layerClassId = this.layerClassId // 图层id
				this.user_choice_id = fabricsId
				uni.setStorage({
					key: 'layerClassId_' + layerClassId,
					data: fabricsId
				})
				uni.setStorage({
					key: 'layerClassId_' + layerClassId + '_ourfaid',
					data: e.currentTarget.dataset.ourid
				})
				$(this).toggleClass('on')

				// 提示用户
				this.Tips_user()
			},
			Tips_user() {
				var all_data = this.resData.layerClassAndLayerParamsJSONList
				var arr = []
				var info = ''
				for (let i = 0; i < all_data.length; i++) {
					info = uni.getStorageSync('layerClassId_' + all_data[i].id)
					if (info) {
						arr[i] = {
							name: all_data[i].classificationName,
							id: all_data[i].id,
							imgurl: this.get_imgurl(info)
						}
					}
				}
				arr = arr.filter(d => d)
				console.log(arr)
				this.user_record_tip = arr
			},
			get_imgurl(e) {
				var fabrics_arr = this.fabrics
				for (let i = 0; i < fabrics_arr.length; i++) {
					if (fabrics_arr[i].id == e) {
						return fabrics_arr[i].smallUrl
					}
				}
			},

			// 用户删除选择
			close_show(e) {
				var fa_value = e.currentTarget.dataset.id
				uni.removeStorageSync('layerClassId_' + fa_value)
				uni.removeStorageSync('layerClassId_' + fa_value + '_ourfaid')
				// 提示用户
				this.Tips_user()
			},

			// swiper
			init_swiper() {
				var swiper = new Swiper(".cloth-slide", {
					slidesPerView: 2,
					slidesPerColumn: 3,
					pagination: {
						el: '.swiper-pagination',
						type: 'progressbar',
					},
				});
			},

			// 收藏
			go_btn() {
				var s = $('.recom-wrap>ul>.on').length
				if (s > 3) {
					uni.showToast({
						title: '风格太多了，请不要超过3个tag',
						duration: 2000,
						mask: true,
						icon: 'none',
					});
					return;
				}

				if (s < 0 || s == '') {
					uni.showToast({
						title: '至少请选择一个tag',
						duration: 2000,
						mask: true,
						icon: 'none',
					});
					return;
				}

				var arr = []
				$('.recom-wrap>ul>.on').each(function() {
					arr.push($(this).attr("data-name"))
				})
				// console.log(arr)



				var all_data = this.resData.layerClassAndLayerParamsJSONList
				const floorArr = Array.from({
					length: all_data.length
				}, (o, i) => ({
					name: all_data[i].classificationName,
					layerClassId: all_data[i].id,
					fabricId: uni.getStorageSync('layerClassId_' + all_data[i].id),
					ourfabricid: uni.getStorageSync('layerClassId_' + all_data[i].id + '_ourfaid')
				}))

				var post_data = {
					params: JSON.stringify(floorArr),
					// styleName: JSON.stringify(arr)
					styleName: arr
				}

				this.$http({
					url: 'Customizedapi/Composite/my_get_collection',
					data: post_data,
					method: 'post',
					hideLoading: false,
					success: res => {
						if (res.code == 1) {
							// 收藏成功后 清除数据
							for (let i = 0; i < all_data.length; i++) {
								uni.removeStorageSync('layerClassId_' + all_data[i].id)
								uni.removeStorageSync('layerClassId_' + all_data[i].id + '_ourfaid')
							}

							uni.showToast({
								title: res.msg,
								duration: 2000,
								mask: true,
								icon: 'success',
							});
						}
					},

					complete: res => {
						uni.navigateTo({
							url: '/pages/collection/index'
						})
					}
				})
			},
			ggg(e) {
				let that = this
				if (that.rSelect.indexOf(e) == -1) {
					// console.log(e)//打印下标
					that.rSelect.push(e); //选中添加到数组里
				} else {
					that.rSelect.splice(that.rSelect.indexOf(e), 1); //取消
				}
			},
			introduce(){
				this.is_show_introduce = !this.is_show_introduce
			},
			
			
			get_completed_all(){
				var that = this
				var post_data = {
					
				}
				that.$http({
					url: 'Customizedapi/Master/index_completedme',
					data: post_data,
					method: 'post',
					hideLoading: false,
					success: res => {
						that.completedme_list = res.data
					}
				})
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// this.get_completed()
			this.get_completed_all()
			// 测试用户
			// uni.setStorageSync('token','o8A6XwC31n4jmPz7uVlmwpG-PdCQ')
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {
			// this.init_swiper()
		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {

		},

		onShow() {
			this.$wechat.share({
				title: "转发测试-耀定制",
				desc: "我要定制西服，最好是免费的",
				img: "http://www.nnhaoyao.com/public/lib/wap/images/logo.png"
			}, 'http://www.nnhaoyao.com/h5/')
		}

	}
</script>

<style>
	@import url('index.css');
</style>
